<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/aui-slide.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/aui-flex.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/public.css"/>
    <style>
        #classify {
            padding: 10px 0 5px 0;
            margin-bottom: 10px;
        }

        #classify img {
            width: 50%;
        }

        #banner {
            margin-bottom: 10px;
        }

        #banner img {
            width: 100%;
            display: block;
        }

        .hot-list img {
            width: 80%;
            display: block;
            margin: 0 auto 5px;
        }
        #gongge img{
            width:100%
        }
        .aui-grid-nine li{
            padding: 10px;
        }
        .aui-slide-node img {
            max-height: 200px !important;height: auto;
        }
        .title{
            font-size: 13px;
        }
        #classify p{
            font-size: 13px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div id="aui-slide">
            <div class="aui-slide-wrap">
                <div class="aui-slide-node bg-dark aui-text-center" v-for="(ads1,index) in ads1_list" tapmode v-on:click="open_goods(ads1.goods_id)">
                    <img :src="ads1.url" alt="" style="height: 10rem;">
                </div>
            </div>
            <div class="aui-slide-page-wrap"><!--分页容器--></div>
        </div>
        <section class="aui-flex-col aui-text-center bg-white aui-border-b" id="classify">
            <div class="aui-flex-item-3" tapmode v-on:click="open_goodslist(1)">
                <img src="../../image/b002.png"/><p>新品</p>
            </div>
            <div class="aui-flex-item-3" tapmode v-on:click="open_goodslist(2)">
                <img src="../../image/b003.png"/><p>热销</p>
            </div>
            <div class="aui-flex-item-3" tapmode v-on:click="open_goodslist(3)">
                <img src="../../image/b004.png"/><p>推荐</p>
            </div>
            <div class="aui-flex-item-3" tapmode v-on:click="open_collect()">
                <img src="../../image/b005.png"/><p>收藏</p>
            </div>
        </section>
        <section class="aui-content" id="banner">
            <img src="../../image/5836ad3aN45a75063.jpg"/>
        </section>
        <section class="bg-white aui-content" id="gongge">
            <div class="title aui-padded-10">
                平台推荐
            </div>
            <div class="aui-content">
                <ul class="aui-grid-nine">
                    <li class="aui-col-xs-4 aui-text-center" tapmode v-on:click="open_goods(ads2.goods_id)" v-for="(ads2,index) in ads2_list">
                        <img :src="ads2.url"/>
                    </li>
                </ul>
            </div>
        </section>
        <section class="aui-content bg-white">
            <div class="title aui-padded-10 aui-border-b">
                商品
            </div>
            <ul class="aui-list-view">
                <transition-group name="list" tag="p">
                <li class="aui-list-view-cell aui-img" v-for="(vo,index) in goods_list" tapmode v-on:click="open_goods(vo.id)" v-bind:key="index">
                    <img class="aui-img-object aui-pull-left" :src="vo.url" v-if="vo.url">
                    <img class="aui-img-object aui-pull-left" src="../../image/default.png" v-else>
                    <div class="aui-img-body aui-ellipsis-2">
                        {{ vo.goods_name }}
                    </div>
                    <div class="aui-img-footer">
                    <span class="aui-text-danger goods-price">
                        ¥<strong>{{ vo.price }}</strong>元
                    </span>
                    </div>
                </li>
                </transition-group>
            </ul>
        </section>
    </div>
    <script type="text/javascript" src="../../script/api.js"></script>
    <script type="text/javascript" src="../../script/common.js"></script>
    <script type="text/javascript" src="../../script/aui-slide.js"></script>
    <script type="text/javascript" src="../../script/vue.js"></script>
</body>
</html>
<script type="text/javascript">
    function goodlist(index) {
        api.openWin({
            name: 'index_goods_list',
            url: 'widget://html/index/goods_list.html',
            pageParam: {
                index: index
            }
        });
    }
</script>
<script>
    var slide = null;
    var vm = new Vue({
        el: '#app',
        data: {
            ads1_list: [
            ],
            ads2_list: [],
            goods_list: []
        },
        methods: {
            init: function () {
                api.ajax({
                    url: index_url,
                    method: 'post',
                    timeout: 30,
                    dataType: 'json',
                    returnAll: false,
                    data: {
                        values: {
                            name: 'values'
                        }
                    }
                }, function (ret, err) {
                    if (ret) {
                        vm.ads1_list = ret.data.ads1_list;
                        vm.ads2_list = ret.data.ads2_list;
                        vm.goods_list = ret.data.goods_list;
                        console.log(JSON.stringify(vm.ads1_list));
                        console.log(JSON.stringify(vm.ads2_list));
                        console.log(JSON.stringify(vm.goods_list));
                        setTimeout(function () {
                            slide = new auiSlide({
                                container: document.getElementById("aui-slide"),
                                "height": 120,
                                "speed": 300,
                                "pageShow": true,
                                "pageStyle": 'dot',
                                "loop": true,
                                'autoPlay': 5000,
                                'dotPosition': 'center',
                            });
                        },'100');
                    } else {
                        api.alert(JSON.stringify(err));
                    }
                });
            },
            open_goods:function (info_id) {
                api.openWin({
                    name: 'index_goods_detail',
                    url: 'widget://html/index/goods_detail.html',
                    pageParam: {
                        info_id: info_id
                    },
                    delay: 300,
                });
            },
            open_collect:function () {
                if(is_login()){
                    openWin('index','collection')
                }else{
                    go_login();
                }
            },
            open_goodslist:function (tag) {
                var pageParam = '';
                if(tag == 1){
                    pageParam = {is_new:1};
                }
                if(tag == 2){
                    pageParam = {is_hot:1};
                }
                if(tag == 3){
                    pageParam = {is_rec:1};
                }
                api.openWin({
                    name: 'goods_list',
                    url: 'widget://html/index/goods_list.html',
                    pageParam: pageParam,
                });
            }
        }
    });
    apiready = function () {
        api.setRefreshHeaderInfo({
            visible: true,
            loadingImg: 'widget://image/refresh.png',
            bgColor: '#f4f4f4',
            textColor: '#333333',
            textDown: '下拉刷新...',
            textUp: '松开刷新...',
            showTime: true
        }, function(ret, err) {
            slide = null;
            vm.init();
            setTimeout("api.refreshHeaderLoadDone()",'500');
        });
        vm.init();
    };
    function goodlist(index) {
        api.openWin({
            name: 'index_goods_list',
            url: 'widget://html/index/goods_list.html',
            pageParam: {
                index: index
            }
        });
    }
</script>